<template>
  <NavBarVue :title="source == 1 ? adminsInfo?.introduction : businessInfo?.businessHeadName + '主页'"/>
  <view class="myBox">
    <!-- 头部 -->
    <view class="myLog">
      <div class="head">
        <div class="head_left">
          <view style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;">
            <BaseCoverImage :src="source == 1 ? adminsInfo?.userNickPicture : businessInfo?.businessLicense"/>
          </view>
          <p style="color: #eee;margin-top: 10px;">{{source == 1 ? adminsInfo?.ipAddress :
            businessInfo?.companyAddress}}</p>
        </div>
        <div class="head_right">
          <p>
            {{source == 1 ? adminsInfo?.nickName : businessInfo?.businessName}}
            <span>{{source == 1 ? adminsInfo?.phone : businessInfo?.businessHeadPhone}}</span>
          </p>
          <p style="color: #eee;margin-top: 15px;">
            笔记ID：
            <span>{{source == 1 ? adminsInfo?.ipAddress : businessInfo?.businessIntroduction}}</span>
          </p>
        </div>
      </div>
      <div class="head_bot">
        <view class="bot_left">
          <view
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
              v-for="(item) in atten_list"
              :key="item.type"
              @click="toTabOther(item.type)"
          >
            <view style="color: #fff;">{{item.num}}</view>
            <text style="color: #bbb;font-size: 12px;margin-top: 5px;">{{item.text}}</text>
          </view>
        </view>
        <div class="bot_right">
          <button class="btn btn-attention" @click="attention">关注</button>
          <button class="btn btn-content" @click="priviteContent">私信</button>
        </div>
      </div>
      <view class="shop_list" v-if="source == 2">
        <view
            v-for="(item) in businessInfo?.storeVOList"
            :key="item.id"
            style="margin-left: 20rpx;"
            @click="toShopDetail(item)"
        >
          <view style="width: 92rpx;height: 92rpx;overflow: hidden;border-radius: 50%;">
            <BaseCoverImage :src="item?.storeLogoPic" mode="aspectFill"/>
          </view>
          <view class="shop_list_name">{{item?.storeName}}</view>
        </view>
      </view>
    </view>
    <!-- 主体部门 -->
    <view class="main">
      <view class="main_tab">
        <u-tabs :list="tab_list" @click="tabList"></u-tabs>
      </view>
      <view class="pubu">
        <ShowIndex v-if="articleStore.articleListData.objects.length" :dataList="pageResults"/>
        <WaterfallLikeVue v-else :dataList="pageResults"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  reactive,
  ref,
  computed
} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {
  useBusinessStore,
  useUserStore,
  useArticleStore
} from '@/store'
import ShowIndex from '@/components/ShowIndex.vue';
import WaterfallLikeVue from '@/components/Waterfall_like.vue';

const tabTag = reactive([
  {
    tagNum: 3,
    tagType: '关注'
  }
])
// 渲染关注，粉丝，获赞量
const atten_list = reactive([
  {
    num: 25,
    text: '关注',
    type: 'attention',
    url: '/pages/tab-mine/attention-fan/index'
  },
  {
    num: 25,
    text: '粉丝',
    type: 'fans',
    url: '/pages/tab-mine/attention-fan/index'
  },
  {
    num: 25,
    text: '获赞和评论',
    type: 'comment',
    url: '/pages/tab-mine/comment/index'
  }
])

const tab_list = computed(() => {
  if (source.value == 1) {
    return [{
      name: '笔记',
    }, {
      name: '收藏',
    }, {
      name: '点赞'
    }]
  } else {
    return [{
      name: '笔记',
    }]
  }
})
const id = ref(null)
const source = ref(null)
onLoad((e) => {
  console.log(e, "| e");
  id.value = e.id
  source.value = e.source
})
const userStore = useUserStore()
const articleStore = useArticleStore()
const itemIndex = ref(0)
const pageResults = computed(() => {
  switch (itemIndex.value) {
    case 0:
      return articleStore.articleListData.objects
    case 1:
      return articleStore.pageResults.data?.collectFutureOPageResult?.objects
    case 2:
      return articleStore.pageResults.data?.likeFuturePageResult?.objects
    default:
      return []
  }
})
const businessStore = useBusinessStore()
const businessInfo = ref({})
const adminsInfo = ref({})
onMounted(async () => {
  if (source.value == 1) {
    // 访问用户的详情接口
    await userStore.adminBasicUserDetail(id.value)
    console.log(userStore.userInfo.adminUserInfos, "| userStore.userInfo.adminUserInfos");
    adminsInfo.value = userStore.userInfo.adminUserInfos
  }
  if (source.value == 2) {
    // 访问商家接口
    await businessStore.findBusinessId(id.value)
    businessInfo.value = businessStore.businessDetail?.business
  }
  const res = await articleStore.articleGetBehaviorList({
    page: 1,
    pageSize: 10
  })
  const resLoacation = await uni.getLocation({
    type: 'wgs84',
  });
  await articleStore.articleList({
    latitude: resLoacation.latitude,
    longitude: resLoacation.longitude,
    page: 1,
    pageSize: 10,
    source: 1,
    userId: id.value
  }, 'init')
  atten_list[2].num = articleStore.articleListData.objects.reduce((prev, next) => {
    return prev += next.likeCount
  }, 0)
  atten_list[0].num = articleStore.articleListData.objects.reduce((prev, next) => {
    return prev += next.favoriteCount
  }, 0)
})
const tabList = (item) => {
  console.log(item, "| item");
  itemIndex.value = item.index
}
const attention = () => {
  uni.showToast({
    title: "关注"
  })
}
const priviteContent = () => {
  uni.showToast({
    title: "私信"
  })
}

// 店铺详情
const toShopDetail = (item) => {
  console.log(item, "| itme");
  uni.navigateTo({
    url: `/pages/tab-index/shop/visit-shop/index?id=${item.id}`
  })
}
</script>

<style scoped>
.myBox {
  width: 100vw;
  height: 100vh;
}

.myLog {
  width: 100%;
  /* height: 240px; */
  /* margin-top: 20px; */
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  background: rgb(99, 139, 160);
}

.head {
  width: 100%;
  height: 130px;
  /* background: salmon; */
  display: flex;
  /* margin-top: 20px; */
}

.head_left {
  width: 100px;
  height: 100%;
  /* background: salmon; */
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.head_right {
  flex: 1;
  margin-top: 30px;
  margin-left: 15px;
  color: #fff;
}

.head_bot {
  width: 100%;
  height: 80px;
  /* background: salmon; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bot_left {
  width: 200px;
  height: 100%;
  display: flex;
  /* background: salmon; */
  justify-content: space-evenly;
}

.bot_right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_list {
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.shop_list_name {
  text-align: center;
  margin-top: 10rpx;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.shop_list > view {
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main {
  width: 100%;
  /* height: 500px; */
  /* background: sandybrown; */
  margin-top: -30px;
}

.main_tab {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 12px 12px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_li {
  width: 100%;
  /* height: 200px; */
  /* background: seashell; */
  text-align: center;
}

.pubu {
  width: 100%;
  /* height: 300px; */
  height: auto;
  display: flex;
  justify-content: space-evenly;
}

.left {
  width: 46vw;
  height: auto;
  margin-right: 2vw;
}

.left .ul {
  width: 100%;
  height: auto;
}

.left .ul .li {
  font-size: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;

}

.right {
  width: 46vw;
  height: auto;
}

.right.ul {
  width: 100%;
  height: auto;
}

.right .ul .li {
  font-size: 14px;
  width: 100%;
  height: auto;
}

.tx {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0px 10px;
  margin-top: 10px;
}

.nr {
  box-sizing: border-box;
  padding: 0px 10px;
}

.ttt {
  width: 100%;
  height: 220px;
}

.tt {
  width: 100%;
  height: 200px;
}

.btn {
  width: 110rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 56rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.btn-attention {
  background: #FB7685;
  color: #FFFFFF;
}

.btn-content {
  background: rgb(99, 139, 160);
  color: #fff;
  border: 1px solid #fff;
}
</style>